import Taro, { Component } from '@tarojs/taro'
import { View, Input, Button, Text } from '@tarojs/components'

import {loginRequest} from '../../API/request'
import './index.scss'


class Index extends Component {
    config = {
        navigationBarTitleText: '登录'
    }

    constructor(props) {
        super(props)
    }

    state = {
        hideCanvas: false,
        active: false
    }

    componentDidShow() {

    }
    

    clickCanvas = () => {
        this.setState({
            active: true
        })

        setTimeout(() => {
            this.setState({
                hideCanvas: true
            })
        }, 4000);
    }

    render() {
        let {hideCanvas, active} = this.state;
        console.log(active)
        return (
            <View className="login-wrap">

                    {
                        hideCanvas? 
                        <View className="account-contnet">
                            <View className="account-wrap">
                                <Text>账号</Text>
                                <Input type="text"  focus placeholder="请输入账号" />
                            </View>
                            <View className="password-wrap">
                                <Text>密码</Text>
                                <Input type="password"  placeholder="请输入密码" />
                            </View>
                        </View>
                        : null
                    }
                    
                    <View className={!active ? "loing-canvas":"loing-canvas loing-canvas-acivte"}>
                        <div className={ !active ? "top-wrap": "top-wrap top-wrap-active"}>
                        </div>
                        <div className={!active ? "circle-wrap": "circle-wrap circle-wrap-active"} onClick={this.clickCanvas}>

                        </div>
                        <div className={!active ? "bottom-wrap": "bottom-wrap bottom-wrap-active"}>

                        </div>

                    </View>
                
               
            </View>
        )
    }
}


export default Index
